import { ref } from "vue";
export default {
  props: { msg: String },
  setup(props, { slots }) {
    const count = ref(0);
    const countAdd = () => count.value++;
    const myjsx = "hello jsx";

    const DefaltSlot = slots["default"];
    const MySlot = slots["my-slot"];

    return () => (
      <>
        {slots["my-slot"]()}
        <MySlot />
        <span>{myjsx}</span>
        <span onClick={countAdd}>{count.value}</span>
        {slots["default"]()}
        <DefaltSlot />
        {props.msg}
        <Child footer={<div>footer</div>}>
          <div>child-slot</div>
        </Child>
      </>
    );
  },
};

import Mock from "mockjs";
// var data = Mock.mock({
//   "list|1-10": [{ "id|+1": 1 }],
//   "s|2": { a: 1, b: 2, c: 3 },
//   name: { first: "@FIRST", last: "@LAST", full: "@first @middle @last" },
// });
// console.log(data);

const Child = ({ footer }, { slots }) => (
  <>
    {slots["default"]()}
    this is child
    {footer}
  </>
);
